/* flex */
.flex {
    display: flex;

&-x {
     display: flex;
     flex-direction: row;

&-start {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;

&-center {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
 }

&-end {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-end;
 }
}

&-center {
     display: flex;
     flex-direction: row;
     justify-content: center;

&-center {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
 }

&-end {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: flex-end;
 }
}

&-end {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;

&-center {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
 }

&-end {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: flex-end;
 }
}

&-between {
     display: flex;
     flex-direction: row;
     justify-content: space-between;

&-center {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
 }

&-end {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-end;
 }
}

&-around {
     display: flex;
     flex-direction: row;
     justify-content: space-around;

&-center {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
 }

&-end {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: flex-end;
 }
}
}

&-y {
     display: flex;
     flex-direction: column;

&-start {
     display: flex;
     flex-direction: column;
     align-items: flex-start;

&-center {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
 }

&-end {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-end;
 }
}

&-center {
     display: flex;
     flex-direction: column;
     align-items: center;

&-center {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

&-end {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;
 }
}

&-end {
     display: flex;
     flex-direction: column;
     align-items: flex-end;

&-center {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     justify-content: center;
 }

&-end {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     justify-content: flex-end;
 }
}
}

&-wrap {
     flex-wrap: wrap;
 }
}

/*浮动*/
.fr {
    float: right;
}

.fl {
    float: left;
}

.clearfix {
&:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }
}

/*文本*/
.tr {
    text-align: right;
}

.tl {
    text-align: left;
}

.tc {
    text-align: center;
}

/*盒子*/
.border-box {
    box-sizing: border-box;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

/*定位*/
.relative {
    position: relative;
}

.absolute {
    position: absolute;

&-x-center {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
 }

&-y-center {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
 }

&-x-y-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
}
